import { Text, View, StyleSheet, Image, TouchableWithoutFeedback, StatusBar } from 'react-native'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { IconFill, IconOutline } from "@ant-design/icons-react-native";
import { formatAddress } from "../../utils/format"
import { pTx } from "../../utils/dimensions"
import { grade } from "../../utils/grade"
import { Cell, Popup } from '@pingtou/rn-vant'
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import Realm from "realm"
import httpApi from "../../api"
import IconFont from '@pingtou/rn-vant-icons'
import Avatar from "../../components/avatar"

const Mine = (props) => {
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];
    return (
        <View style={styles.page}>
            <StatusBar backgroundColor="rgba(237, 237, 237, 1)" barStyle={"dark-content"} />
            {/* <StatusBar backgroundColor={'#fff'} barStyle={'dark-content'} /> */}
            <TouchableWithoutFeedback onPress={() => props.navigation.navigate('mineDetailsList')}>
                <View style={styles.content} >
                    <View style={styles.infoCotent}>
                        <Avatar style={[styles.Image]} source={{ uri: userInfo.ProfilePhoto }}></Avatar>
                        <View style={styles.info}>
                            <View style={styles.infoCotent}><Text style={styles.name}>{userInfo.NickName}</Text>
                                {/* <Image style={styles.infoCotentImage} source={grade[userInfo.UserLevel]}></Image> */}
                            </View>
                            <Text style={styles.txt}>0x{formatAddress(userInfo.Address)}</Text>
                        </View>
                    </View>
                    <View style={styles.contentRight}>
                        <IconFont name="arrow" color={"rgba(178, 178, 178, 1)"} size={pTx(14)} />
                    </View>
                </View>
            </TouchableWithoutFeedback>
            <View style={styles.firstColumn} >
                <View style={styles.firstColumnCell} >
                    <Text style={styles.firstColumnCellValue} >0</Text>
                    <Text style={styles.firstColumnCellLabel} >动态</Text>
                </View>
                <View style={styles.firstColumnCell} >
                    <Text style={styles.firstColumnCellValue} >0</Text>
                    <Text style={styles.firstColumnCellLabel} >收藏</Text>
                </View>
                <View style={styles.firstColumnCell} >
                    <Text style={styles.firstColumnCellValue} >{userInfo.Following}</Text>
                    <Text style={styles.firstColumnCellLabel} >关注</Text>
                </View>
                <View style={styles.firstColumnCell} >
                    <Text style={styles.firstColumnCellValue} >{userInfo.Followers}</Text>
                    <Text style={styles.firstColumnCellLabel} >粉丝</Text>
                </View>
            </View>
            <View style={styles.block} >
                <View style={styles.twoColumn} >
                    <Text style={styles.title} >资产</Text>
                    <View style={styles.twoColumnBox} >
                        <View style={styles.twoColumnCell} >
                            <Image style={styles.currencyIcon} source={require('../../assets/image/USDT.png')}></Image>
                            <View  >
                                <Text style={styles.twoCellValue} >USDT</Text>
                                <Text style={styles.twoCellLabel} >{userInfo.USDT}</Text>
                            </View>
                        </View>
                        <View style={styles.twoColumnCell} >
                            <Image style={styles.currencyIcon} source={require('../../assets/image/TWEET.png')}></Image>
                            <View  >
                                <Text style={styles.twoCellValue} >TWEET</Text>
                                <Text style={styles.twoCellLabel} >{userInfo.Tweet}</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.twoColumn} >
                    <Text style={styles.title} >挖矿</Text>
                    <View style={styles.twoColumnBox} >
                        <TouchableWithoutFeedback onPress={() => props.navigation.navigate('notOpen')}>
                            <View style={[styles.firstColumnCell, { alignItems: "center", }]} >
                                <Image style={[styles.currencyIconMin]} source={require('../../assets/image/icon41.png')}></Image>
                                <Text style={[styles.firstColumnCellLabel]} >社区挖矿</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPress={() => props.navigation.navigate('notOpen')}>
                            <View style={[styles.firstColumnCell, { alignItems: "center", }]} >
                                <Image style={[styles.currencyIconMin]} source={require('../../assets/image/icon42.png')}></Image>
                                <Text style={[styles.firstColumnCellLabel]} >群主挖矿</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPress={() => props.navigation.navigate('notOpen')}>
                            <View style={[styles.firstColumnCell, { alignItems: "center", }]} >
                                <Image style={[styles.currencyIconMin]} source={require('../../assets/image/icon43.png')}></Image>
                                <Text style={[styles.firstColumnCellLabel]} >博主挖矿</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </View>
                {/* <View style={styles.twoColumn} >
                        <Text style={styles.title} >帐号</Text>
                        <View style={styles.twoColumnBox} >
                            <TouchableWithoutFeedback onPress={() => props.navigation.navigate('setAdd')}>
                                <View style={[styles.firstColumnCell, { alignItems: "center", }]} >
                                    <Image style={[styles.currencyIconMin]} source={require('../../assets/image/icon44.png')}></Image>
                                    <Text style={[styles.firstColumnCellLabel]} >加我的方式</Text>
                                </View>
                            </TouchableWithoutFeedback>
                            <TouchableWithoutFeedback onPress={() => props.navigation.navigate('mineSwitchAccount')}>
                                <View style={[styles.firstColumnCell, { alignItems: "center", }]} >
                                    <Image style={[styles.currencyIconMin]} source={require('../../assets/image/icon45.png')}></Image>
                                    <Text style={[styles.firstColumnCellLabel]} >切换帐号</Text>
                                </View>
                            </TouchableWithoutFeedback>
                            <TouchableWithoutFeedback onPress={() => props.navigation.navigate('notOpen')}>
                                <View style={[styles.firstColumnCell, { alignItems: "center", }]} >
                                    <Image style={[styles.currencyIconMin]} source={require('../../assets/image/icon46.png')}></Image>
                                    <Text style={[styles.firstColumnCellLabel]} >拉黑</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        </View>
                    </View> */}
                <View style={styles.twoColumn} >
                    <Text style={styles.title} >TweetPay</Text>
                    <View style={styles.twoColumnBox} >
                        <View style={[styles.twoColumnCell, styles.TweetPayColumnBox]} >
                            <View  >
                                <Text style={styles.twoCellValue} >今日收款</Text>
                                <Text style={[styles.twoCellLabel, { textAlign: "center" }]} >0</Text>
                            </View>
                        </View>
                        <View style={[styles.twoColumnCell, styles.TweetPayColumnBox]} >
                            <View  >
                                <Text style={styles.twoCellValue} >累计收款</Text>
                                <Text style={[styles.twoCellLabel, { textAlign: "center" }]} >0</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.cellGroup} >
                    <TouchableWithoutFeedback onPress={() => props.navigation.navigate('accountManagement')}>
                        <View style={[styles.cell, { borderBottomWidth: 1 }]} >
                            <View style={styles.cellLeft} >
                                <Image style={[styles.currencyIconMin]} source={require('../../assets/image/icon54.png')}></Image>
                                <Text style={styles.cellName} >帐号管理</Text>
                            </View>
                            <IconFont name="arrow" color={"rgba(178, 178, 178, 1)"} size={pTx(14)} />
                        </View>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPress={() => props.navigation.navigate('systemManagement')}>
                        <View style={styles.cell} >
                            <View style={styles.cellLeft} >
                                <Image style={[styles.currencyIconMin]} source={require('../../assets/image/icon53.png')}></Image>
                                <Text style={styles.cellName} >系统设置</Text>
                            </View>
                            <IconFont name="arrow" color={"rgba(178, 178, 178, 1)"} size={pTx(14)} />
                        </View>
                    </TouchableWithoutFeedback>
                </View>
            </View>
        </View>
    )
}
const mapStateToProps = state => {
    return {
    }
}
export default connect(mapStateToProps, {})(Mine)


const styles = StyleSheet.create({
    page: {
        flex: 1,
        backgroundColor: "#fff",
    },
    content: {
        paddingHorizontal: pTx(15),
        marginTop: pTx(24),
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center"
    },
    Image: {
        width: pTx(75),
        height: pTx(75),
        borderRadius: pTx(15),
    },
    infoCotent: {
        flexDirection: 'row',
        alignItems: "center",
    },
    infoCotentImage: {
        marginLeft: pTx(8),
        width: pTx(34),
        height: pTx(16),
    },
    info: {
        marginLeft: pTx(12),
    },
    contentRight: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
        color: "rgba(178, 178, 178, 1)"
    },
    name: {
        flexDirection: 'row',
        fontSize: pTx(18),
        color: "#0A0C14",
    },
    txt: {
        fontSize: pTx(12),
        color: "rgba(67, 67, 67, 1)",
        marginTop: pTx(10),
    },
    block: {
        flex: 1,
        padding: pTx(15),
        backgroundColor: "rgba(247, 247, 247, 1)",
        borderRadius: pTx(12)
    },
    firstColumn: {
        paddingBottom: pTx(15),
        marginTop: pTx(20),
        flexDirection: 'row',
        justifyContent: "space-between"
    },
    firstColumnCell: {
        flex: 1,
        justifyContent: "center"
    },
    firstColumnCellValue: {
        fontSize: pTx(16),
        fontWeight: "bold",
        color: "rgba(10, 12, 20, 1)",
        textAlign: "center"
    },
    firstColumnCellLabel: {
        marginTop: pTx(3),
        fontSize: pTx(14),
        color: "rgba(10, 12, 20, 1)",
        textAlign: "center",
    },
    twoColumn: {
        marginBottom: pTx(8),
        padding: pTx(15),
        backgroundColor: "#FFF",
        borderRadius: pTx(3),
    },
    title: {
        marginBottom: pTx(12),
        fontSize: pTx(16),
        color: "#0A0C14",
        fontWeight: "500"
    },
    twoColumnBox: {
        flexDirection: 'row',
        justifyContent: "space-between"
    },
    twoColumnCell: {
        width: pTx(154),
        flexDirection: 'row',
        alignItems: "center",
        padding: pTx(12),
        backgroundColor: "rgba(57, 192, 49, 0.05)",
        borderRadius: pTx(3),
    },
    currencyIcon: {
        marginRight: pTx(8),
        width: pTx(25),
        height: pTx(25),
    },
    currencyIconMin: {
        width: pTx(20),
        height: pTx(20),
    },
    twoCellValue: {
        fontSize: pTx(13),
        color: "rgba(10, 12, 20, 1)",
    },
    twoCellLabel: {
        fontSize: pTx(12),
        color: "rgba(10, 12, 20, 1)",
    },
    TweetPayColumnBox: {
        flexDirection: 'row',
        justifyContent: "center"
    },
    cellGroup: {
        backgroundColor: "#FFF",
        borderRadius: pTx(6),
        paddingHorizontal: pTx(15),
    },
    cell: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
        paddingVertical: pTx(15),
        borderColor: "rgba(175, 181, 189, 0.15)"

    },
    cellLeft: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
    },
    cellName: {
        marginLeft: pTx(12),
        fontSize: pTx(16),
        color: "#000"
    }
})
